<template>
	<view class="addresslist">
		<u-navbar title="我的地址" @rightClick="rightClick" :autoBack="true">
		</u-navbar>
		<view class="emptylistcard" v-if="list.length<=0">
			<view class="emptyaddresslist">
				<u-icon class="emptyaddresslisticon" name="file-text" color="#868c8f" size="70"></u-icon>
			</view>
			<view class="emptyaddresslist">
				暂无地址信息
			</view>
		</view>
		<view class="listcard" v-else>
			<view class="listitemcard" v-for="(item,index) in list" :key="index">
				<view class="userinfo">
					<view class="username">
						{{item.username}}
					</view>
					<view class="">
						{{item.phone}}
					</view>
				</view>
				<view class="addressitem">
					{{item.address}}
				</view>
				<u-divider></u-divider>
				<view class="setupcard">
					<view class="" v-if="item.disabled">
						默认地址
					</view>
					<view class="" v-else>
						 
					</view>
					<view class="changesetup">
						<view class="editchange" @click="edititem(item)">
							编辑
						</view>
						<view class="editchangedelete" @click="deleteitem(item)">
							删除
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="addaddress" @click="addaddressitem">
			新增收获地址
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				list: [{
					name: '苹果',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15：52：25',
						info: '棉服',
						username: '三十多岁',
						 disabled: true
					},
					{
						 name: '香蕉',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15：52：25',
						info: '棉服',
						username: '三十多岁',
						 disabled: false
					},
					{
						name: '橙子',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15：52：25',
						info: '棉服',
						username: '三十多岁',
						 disabled: false
					},
					{
						 name: '榴莲',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15：52：25',
						info: '棉服',
						username: '三十多岁',
						 disabled: false
					},
					{
						 name: 's55',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15：52：25',
						info: '棉服',
						username: '三十多岁',
						 disabled: false
					},
					{
						 name: '香蕉',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15：52：25',
						info: '棉服',
						username: '三十多岁',
						 disabled: false
					},
					{
						name: '橙子',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15：52：25',
						info: '棉服',
						username: '三十多岁',
						 disabled: false
					},
					{
						 name: '榴莲',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15：52：25',
						info: '棉服',
						username: '三十多岁',
						 disabled: false
					},
					{
						 name: 's55',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15：52：25',
						info: '棉服',
						username: '三十多岁',
						 disabled: false
					},
					{
						 name: '香蕉',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15：52：25',
						info: '棉服',
						username: '三十多岁',
						 disabled: false
					},
					{
						name: '橙子',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15：52：25',
						info: '棉服',
						username: '三十多岁',
						 disabled: false
					},
					{
						 name: '榴莲',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15：52：25',
						info: '棉服',
						username: '三十多岁',
						 disabled: false
					},
					{
						 name: 's55',
						phone: '9953237641',
						address: 'XXX省XXX市X号街道X单元XXX楼',
						time: '2025-01-03 15：52：25',
						info: '棉服',
						username: '三十多岁',
						 disabled: false
					},
				]
		
			}
		},
		methods: {
			rightClick() {
				console.log('rightClick');
				uni.switchTab({
					url: '/pages/user/user'
				})
			},
			changeradio(item){
				console.log(item)
			},
			deleteitem(item){
				console.log(item)
			},
			edititem(item){
				console.log(item)
				uni.navigateTo({
					url:'/pages/addaddress/addaddress'
				})
			},
			addaddressitem(){
				uni.navigateTo({
					url:'/pages/addaddress/addaddress'
				})
			}
		}
	}
</script>

<style lang="less">
	.addresslist {
		width: 100%;
		height: 100vh;
		position: relative;
	background-color: #f9f9f9;
		.emptylistcard {

			position: absolute;
			top: 25%;
			left: 50%;
			transform: translateX(-50%);

			.emptyaddresslist {
				display: flex;
				justify-content: center;

			}
		}

		.listcard {
			position: relative;
			top: 12%;
			width: 100%;
			height: calc(100vh - 12% - 85px);
			background-color: #f9f9f9;
			overflow: scroll;

			.listitemcard {
				width: 90%;
				height: 110px;
				position: relative;
				left: 50%;
				transform: translateX(-50%);
				border-radius: 10px;
				background: #fff;
				box-shadow: 1px 2px 1px 0px #ababab;
				display: flex;
				flex-direction: column;
				padding: 10px;
				box-sizing: border-box;
				margin-bottom: 10px;

				.userinfo {
					display: flex;
					font-size: 14px;
					margin-bottom: 10px;

					.username {
						margin-right: 10px;
					}
				}
				.addressitem{
					font-size: 14px;
				}
				.setupcard{
					display: flex;
					justify-content: space-between;
						align-items: center;
					.changesetup{
						display: flex;
						justify-content: space-between;
						font-size: 14px;
						.editchange{
							width: 50px;
							height:25px;
							background: orange;
							line-height: 25px;
							text-align: center;
							border-radius: 10px;
							margin-right: 10px;
						}
						.editchangedelete{
							width: 50px;
							height:25px;
							background: red;
							line-height: 25px;
							text-align: center;
							border-radius: 10px;
							margin-right: 10px;
							color: #fff;
						
						}
					}
				}
			}
		}

		.addaddress {
			width: 90%;
			position: fixed;
			bottom: 30px;
			left: 50%;
			transform: translateX(-50%);
			background-color: #ff5c57;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border-radius: 10px;
			color: #fff;
		}
	}
	.u-divider{
		margin: 10px 0 !important;
	}
</style>